import {useState,useEffect,useRef} from 'react'
import {useLocation,useNavigate,Outlet} from 'react-router-dom'
// import axios from 'axios'

import { Select ,Flex ,Button, Table,Space} from 'antd';
import type { TableColumnsType } from 'antd';
import WestDurg from '../wycomponentpage/westDrugList.tsx'


interface DataType {
    key:string,
    room: string,//取药药房
    expiration: string,//有效期
    diagnosis: string,//诊断
    metering: string,//单词计量
    numberOfTimes: string,//用药次数
    dayTime: number,//用药天数
    type: boolean,//处方类型//
    medicine: string,//药品编码
    drug: string,//药品名称
    specification: string,//药品规格
    xi_signetur: string,//西药注意用法
    quantity: string,//发药数量
    drug_price: string,//药品单价
    notes: string,//备注
  }
let premain = {
    width:'100%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid orange',
}
let awgtit = {
    width:'100%',
    height:'40px',
    borderRadius: 6,
    // border:'1px solid blue',
}
let pretop = {
    width:'100%',
    height:'50px',
    borderRadius: 6,
    // border:'1px solid blue',
}
let prebott = {
    width:'100%',
    height:'400px',
    borderRadius: 6,
    // border:'1px solid blue',
}
let prefloor = {
    width:'100%',
    height:'60px',
    borderRadius: 6,
    // border:'1px solid blue',
}
let pretplef0 = {
    width:'20%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid blue',
}
let pretplef1 = {
    width:'20%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid blue',
}
let pretplef2 = {
    width:'20%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid blue',
}
let pretplef3 = {
    width:'20%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid blue',
}
let prebtn = {
    width:'100%',
    height:'10%',
    borderRadius: 6,
    border:'1px solid gray',
}
let prefrlf = {
    width:'30%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid red',
}
let prefrhg = {
    width:'40%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid red',
}



  
  const data: DataType[] = [
    // {
    //     key:'',
    //     room: '',
    //     expiration: '',
    //     diagnosis: '',
    //     metering: '123',
    //     numberOfTimes: '123',
    //     dayTime: 10,
    //     type: false,
    //     medicine: '单击选择药品',
    //     drug: '',
    //     specification: '',
    //     xi_signetur: '213',
    //     quantity: '123',
    //     drug_price: '',
    //     notes: '',
    // },
    {
        key:'0',
        room: '123',
        expiration: '123',
        diagnosis: '123',
        metering: '123',
        numberOfTimes: '123',
        dayTime: 100,
        type: false,
        medicine: '123',
        drug: '123',
        specification: '123',
        xi_signetur: '213',
        quantity: '123',
        drug_price: '123',
        notes: '123',
    }

  ];
  

export default function addwestDrug(){
    const columns: TableColumnsType<DataType> = [
        {
          title: '序号',
          dataIndex: 'key',
        },
        {
          title: '药品编码',
          dataIndex:'medicine',
            // render: (_, record) => (
            //     <Space size="middle">
            //       <a onClick={() => btn(record.key)}>编辑</a>
            //       <a>删除</a>
            //     </Space>
            // )
        },
        {
          title: '药品名称',
          dataIndex: 'drug',
        },
        {
            title: '药品规格',
            dataIndex: 'specification',
        },
        {
            title: '单次数量',
            dataIndex: 'metering',
            // render: (_, record) => (
            //     <Space size="middle">
            //       <a onClick={() => btn(record.key)}>编辑</a>
            //       <a>删除</a>
            //     </Space>
            // )
        },
        {
            title: '用药次数',
            dataIndex: 'numberOfTimes',
            // render: (_, record) => (
            //     <Space size="middle">
            //       <a onClick={() => btn(record.key)}>编辑</a>
            //       <a>删除</a>
            //     </Space>
            // )
        },
        {
            title: '用药天数',
            dataIndex: 'dayTime',
            // render: (_, record) => (
            //     <Space size="middle">
            //       <a onClick={() => btn(record.key)}>编辑</a>
            //       <a>删除</a>
            //     </Space>
            // )
        },
        {
            title: '药品用法',
            dataIndex: 'xi_signetur',
            // render: (_, record) => (
            //     <Space size="middle">
            //       <a onClick={() => btn(record.key)}>编辑</a>
            //       <a>删除</a>
            //     </Space>
            // )
        },
        {
            title: '发药数量',
            dataIndex: 'quantity',
            // render: (_, record) => (
            //     <Space size="middle">
            //       <a onClick={() => btn(record.key)}>编辑</a>
            //       <a>删除</a>
            //     </Space>
            // )
        },
        {
            title: '药品单价',
            dataIndex: 'drug_price',
        },
        {
            title: '备注',
            dataIndex: 'notes',
        },
        {
            title: '',
            dataIndex: 'jian',
            // render: (_, record) => (
            //     <Space size="middle">
            //       <a onClick={() => btn(record.key)}>编辑</a>
            //       <a>删除</a>
            //     </Space>
            // )
        },
      ];

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    let btn = (code:any)=>{
        alert(code)
    }

    const childRef = useRef(null);
    const addrug = () => {
        // setIsModalOpen(true);
        if (childRef.current) {
            childRef.current.btnaddrug();
        }
    };


    useEffect(()=>{

    },[])

    return (
        <>
            <Flex wrap vertical  justify='flex-start' align='center' style={premain}>
                <Flex justify='space-around' align='center' style={awgtit}>新增西药处方</Flex>
                <Flex justify='space-between' align='center' style={pretop}>
                    <Flex justify='space-around' align='center' style={pretplef0}>
                        取药药房:<Select
                            defaultValue="请选择"
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                                { value: '门诊西药房', label: '门诊西药房' },
                                { value: '门诊中药方', label: '门诊中药方' },
                                { value: '住院药房', label: '住院药房'},
                                { value: '急诊药房', label: '急诊药房' }
                            ]}
                        />
                    </Flex>
                    <Flex justify='space-around' align='center' style={pretplef1}>
                        处方类型:<Select
                            defaultValue="请选择"
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                                { value: 'jack', label: 'Jack' },
                                { value: 'lucy', label: 'Lucy' },
                                { value: 'Yiminghe', label: 'yiminghe'},
                                { value: 'disabled', label: 'Disabled' }
                            ]}
                        />
                    </Flex>
                    <Flex justify='space-around' align='center' style={pretplef2}>
                        有效期:<Select
                            defaultValue="请选择"
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                                { value: 'jack', label: 'Jack' },
                                { value: 'lucy', label: 'Lucy' },
                                { value: 'Yiminghe', label: 'yiminghe'},
                                { value: 'disabled', label: 'Disabled' }
                            ]}
                        />
                    </Flex>
                    <Flex justify='space-around' align='center' style={pretplef3}>
                        诊断:<Select
                            defaultValue="请选择"
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                                { value: 'jack', label: 'Jack' },
                                { value: 'lucy', label: 'Lucy' },
                                { value: 'Yiminghe', label: 'yiminghe'},
                                { value: 'disabled', label: 'Disabled' }
                            ]}
                        />
                    </Flex>
                </Flex>
                <Flex wrap vertical justify='flex-start' align='center' style={prebott}>
                    <Table<DataType> scroll={{ y:300}}  columns={columns} dataSource={data} pagination={false} size="middle" />
                    <Flex justify='space-around' align='center' style={prebtn} onClick={()=>{addrug()}}>
                        点击添加药品
                    </Flex>
                </Flex>
                <Flex wrap  justify='space-between' align='center' style={prefloor}>
                    <Flex justify='space-between' align='center' style={prefrlf}>
                        处方金额合计：￥{100}
                    </Flex>
                    <Flex justify='space-between' align='center' style={prefrhg}>
                        <Button size='small' >重置处方列表</Button>
                        <Button size='small' type="primary" ghost>存为处方模板</Button>
                        <Button size='small' type="primary" ghost>调用处方模板</Button>
                        <Button size='small' type="primary">保存</Button>
                    </Flex>
                </Flex>
            </Flex>
            <WestDurg ref={childRef} />
            <></>
        </>
    )
}



